*{
    margin:0%;
    padding:0%;
    box-sizing: border-box;
}

html,body{

    height: 100%;
    width:100%;
    background-color: rgb(242, 149, 10);
}

.logo1{

    width:100%;
    display: flex;
  margin-left: 47%;

}

.background{
    animation-name: anim-cont;
    animation-duration: 3s;
  text-align: center;
    color:rgb(255, 187, 0);
    height: 100%;
    width:100%;
    background-color: black;
}

h4{

    color:goldenrod;
    font-size: 15px;
}

.logo{


    width:100%;
    display: flex;
}

.anim-cont{

height:30%;
width:100%;
text-align: center;
position: relative;
padding-top: 20px;
color:rgba(241, 249, 10, 0.767);

}

nav{
   
    background-color: black;
}


ul{

   background-color: whitesmoke;
}
a{
 margin-left: 30px;
font-family:𝐇𝐎𝐌𝐄;
font-size: 20px;
}



a:hover{

    transform: scale(1.1,1.1);
}


.d1{
   color:antiquewhite;
    height: 50%;
    width: 100%;
   display: flex;
 
}

.top-left{
 background-color:antiquewhite;
    height: 100%;
    width: 30%;
 
}

.top-right{
   background-color: rgb(36, 85, 95);
    height: 100%;
    width: 70%;
}



.d1{
   color:black;
    height: 60%;
    width:100%;
   
    background-color: bisque;
}

.d1:hover{

    transform: translatey(-10%);
    backdrop-filter: blur("90%");
}
.box1{

    height: 100%;
    width: 40%;
   
}

.box2{
    height: 100%;
    width:60%;
    padding: 10px;
}


.d2{
    height: 100%;
    width: 100%;
   
   background:linear-gradient(120deg, skyblue,bisque);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.slidebox{

    height: 100%;
    width: 100%;
    
   
}

button{
    padding:10px;
    border:none;
    background-color: rgb(189, 118, 66);
    color:beige;
   
}

button:hover{

    background-color: rgb(9, 62, 32);
    color: bisque;
}